<template>
  <div id="container" @mouseover="stopScroll" @mouseout="resumeScroll">
    <div id="content">
      <!-- 内容 -->
      <p v-for="index in 21" :key="index">This{{ index }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollTest',
  data() {
    return {
      container: null, // DOM元素
      isHovered: false, //滚动
      scrollInterval: null, // 定时器
    };
  },
  mounted() {
    this.container = document.getElementById('container');
    this.startScroll();
  },
  methods: {
    startScroll() {
      if (!this.isHovered) {
        this.scrollInterval = setInterval(() => {
          // 谷歌内核就要使用不同的方法，不能直接++
          if (navigator.userAgent.indexOf("Chrome") !== -1 &&
              navigator.userAgent.indexOf("Safari") !== -1 &&
              navigator.userAgent.indexOf("Edg") === -1
          ) {
            this.container.scrollTop +=  1 / window.devicePixelRatio + 0.05;
          } else {
            // 否则滚动条长度++
            this.container.scrollTop++;
            // this.container.scrollTop += 1; // 向上滚动的速度
          }

          // 获取指定区域的高度
          const elementHeight = this.container.clientHeight;
          // 获取指定区域内文档内容的总高度
          const contentHeight = this.container.scrollHeight;
          // 获取指定区域的滚动位置
          const scrollPosition = this.container.scrollTop;
          // 计算滚动条距离底部的距离
          const distanceToBottom = contentHeight - elementHeight - scrollPosition;
          if (distanceToBottom === 0) {
            this.container.scrollTop = 0;
          }
        }, 50); // 滚动间隔，单位毫秒
      }
    },
    // 当鼠标指针进入后触发
    stopScroll() {
      this.isHovered = true;
      clearInterval(this.scrollInterval);
      this.container.addEventListener('wheel', this.handleWheel);
    },
    // 根据鼠标滚轮事件的滚动距离，将滚动容器的滚动位置向上或向下调整一定的距离
    handleWheel(event) {
      this.container.scrollTop += event.deltaY * 0.2;
      // 阻止浏览器对滚轮事件的默认处理方式
      event.preventDefault();
    },
    // 当鼠标指针离开时触发
    resumeScroll() {
      this.isHovered = false;
      this.container.removeEventListener('wheel', this.handleWheel);
      this.startScroll();
    },
  },
};
</script>

<style scoped>
#container {
  width: 100%;
  height: calc(100% - 21px);
  /* overflow-y: auto; */
  overflow-y: hidden;
}

#content {
  height: 200px; /* 模拟内容比容器高的情况 */
}
</style>
